<template>
  <div class="admin-dashboard">
    <h2>数据概览</h2>
    
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-info">
          <h3>用户总数</h3>
          <p class="stat-number">{{ stats.totalUsers }}</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-pills"></i>
        </div>
        <div class="stat-info">
          <h3>药品总数</h3>
          <p class="stat-number">{{ stats.totalProducts }}</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-shopping-cart"></i>
        </div>
        <div class="stat-info">
          <h3>订单总数</h3>
          <p class="stat-number">{{ stats.totalOrders }}</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-yen-sign"></i>
        </div>
        <div class="stat-info">
          <h3>总销售额</h3>
          <p class="stat-number">¥{{ stats.totalSales }}</p>
        </div>
      </div>
    </div>

    <div class="recent-orders">
      <h3>最近订单</h3>
      <div class="table-responsive">
        <table>
          <thead>
            <tr>
              <th>订单号</th>
              <th>用户</th>
              <th>金额</th>
              <th>状态</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in recentOrders" :key="order.orderNumber">
              <td>{{ order.orderNumber }}</td>
              <td>{{ order.username }}</td>
              <td>¥{{ order.totalAmount }}</td>
              <td>
                <span :class="['status', order.status]">
                  {{ getStatusText(order.status) }}
                </span>
              </td>
              <td>{{ order.createTime }}</td>
            </tr>
          </tbody>
        </table>
        <p v-if="recentOrders.length === 0">暂无最近订单。</p>
      </div>
    </div>

    <div class="low-stock-alert">
      <h3>库存预警 <i class="fas fa-exclamation-triangle"></i></h3>
      <div v-if="lowStockDrugs.length === 0" class="no-alert">
        <p>目前没有需要库存预警的药品。</p>
      </div>
      <div v-else class="table-responsive">
        <table>
          <thead>
            <tr>
              <th>药品名称</th>
              <th>当前库存</th>
              <th>预警状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="drug in lowStockDrugs" :key="drug.id">
              <td>{{ drug.name }}</td>
              <td><span :class="{'low-stock': drug.stock < 10}">{{ drug.stock }}</span></td>
              <td>{{ drug.stockStatus }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { API_ENDPOINTS } from '../../api/config';

export default {
  name: 'AdminDashboard',
  data() {
    return {
      stats: {
        totalUsers: 0,
        totalProducts: 0,
        totalOrders: 0,
        totalSales: 0
      },
      recentOrders: [],
      lowStockDrugs: []
    };
  },
  methods: {
    async fetchStats() {
      try {
        const response = await axios.get(API_ENDPOINTS.STATS.GET_ALL);
        console.log('获取到的统计数据:', response.data);
        
        const data = response.data;
        this.stats = {
          totalUsers: data.totalUsers || 0,
          totalProducts: data.totalProducts || 0,
          totalOrders: data.totalOrders || 0,
          totalSales: data.totalSales !== undefined ? data.totalSales.toFixed(2) : 0
        };
        this.recentOrders = data.recentOrders || [];
        this.lowStockDrugs = data.lowStockDrugs || [];

      } catch (error) {
        console.error('获取统计数据失败:', error);
      }
    },
    getStatusText(status) {
      const statusMap = {
        'pending': '待处理',
        'processing': '处理中',
        'completed': '已完成',
        'cancelled': '已取消'
      };
      return statusMap[status] || status;
    }
  },
  created() {
    this.fetchStats();
  }
};
</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
}

h2 {
  margin-bottom: 30px;
  color: #2c3e50;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #42b983;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.stat-icon i {
  font-size: 24px;
  color: white;
}

.stat-info h3 {
  margin: 0;
  font-size: 1rem;
  color: #666;
}

.stat-number {
  margin: 5px 0 0;
  font-size: 1.8rem;
  font-weight: bold;
  color: #2c3e50;
}

.recent-orders {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 40px;
}

.recent-orders h3 {
  margin: 0 0 20px;
  color: #2c3e50;
}

.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.status.pending {
  background: #fff3cd;
  color: #856404;
}

.status.processing {
  background: #cce5ff;
  color: #004085;
}

.status.completed {
  background: #d4edda;
  color: #155724;
}

.status.cancelled {
  background: #f8d7da;
  color: #721c24;
}

.low-stock-alert {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.low-stock-alert h3 {
  margin: 0 0 20px;
  color: #2c3e50;
  display: flex;
  align-items: center;
}

.low-stock-alert h3 i {
  color: #ffc107;
  margin-left: 10px;
}

.no-alert {
  text-align: center;
  padding: 20px;
  color: #666;
}

.low-stock {
  color: #dc3545;
  font-weight: bold;
}
</style> 
 